<template>
    <div class="goodsinfo-container">

        <transition @before-enter='beforeEnter' @enter='enter' @after-enter='afterEnter'>
            <div class="ball" v-show="ballflag" ref="ball"></div>
        </transition>

        <!-- 轮播图区域 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swipe :lunbotuList='goodsinfoLunbo' :isfull='false'></swipe>
                </div>
            </div>
        </div>
        <!-- 商品区域 -->
        <div class="mui-card">
            <div class="mui-card-header">{{ goodsinfodata.title }}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">
                        市场价：<del>￥{{ goodsinfodata.market_price }}</del>&nbsp;&nbsp;销售价：<span>￥{{ goodsinfodata.sell_price }}</span>
                    </p>
                    <p class="num">
                        购买数量：<numbox @getNum='getCountNum' :max='goodsinfodata.stock_quantity'></numbox>
                        <!-- 分析：如何实现加入购物车时候，拿到选择的数量 -->
                        <!-- 1. 经过分析发现：按钮属于 GoodsInfo 组件，而选择按钮属于 goodsinfo_numbox 组件 -->
                        <!-- 2. 由于涉及到父子组件的嵌套，所以无法直接在 goodsInfo 组件中获取到选中商品的数量 -->
                        <!-- 3. 解决问题的方式：涉及到子组件向父组件传值(时间调用机制) -->
                        <!-- 4. 时间调用机制的本质：父组件向子组件传递方法，子组件通过方法调用传递参数让父组件得到参数 -->
                    </p>
                    <p class="goods-btn">
                        <mt-button type='primary' size='small'>立即购买</mt-button>
                        <mt-button type='danger' size='small' @click="addToShopCar" >加入购物车</mt-button>
                    </p>
                </div>
            </div>
        </div>
        <!-- 商品参数区域 -->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号：{{ goodsinfodata.goods_no }}</p>
                    <p>库存情况：{{ goodsinfodata.stock_quantity }}件</p>
                    <p>上架时间：{{ goodsinfodata.add_time | dateFormat }}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type='primary' size='large' plain @click="goDesc(id)">图文介绍</mt-button>
                <mt-button type='danger' size='large' plain @click="goComment(id)">商品评论</mt-button>
            </div>
        </div>
        
    </div>
</template>

<script>
import numbox from '../subcomponents/goodsinfo_numbox.vue'
import swipe from '../subcomponents/swipe.vue'
import {Toast} from 'mint-ui'
export default {
    data(){
        return {
            id:this.$route.params.id,
            goodsinfoLunbo:[],  //  轮播图图片src地址
            goodsinfodata:{},   //  商品页面数据
            ballflag:false,  //  控制小球隐藏和显示
            selectcount:1
        }
    },
    created(){
        this.getLunbotu()
        this.getGoodsInfo()
    },
    methods:{
        getLunbotu(){
            this.$http.get('api/getthumimages/' + this.id).then(result=>{
                if(result.body.status === 0){
                    // console.log(result.body.message)
                    result.body.message.forEach(item=>{
                        item.img = item.src
                    })
                    this.goodsinfoLunbo = result.body.message
                }else{
                    Toast('获取数据失败!')
                }
            })
        },
        getGoodsInfo(){
            this.$http.get('api/goods/getinfo/' + this.id ).then(result=>{
                if(result.body.status === 0){
                    // console.log(result.body.message)
                    this.goodsinfodata = result.body.message[0]
                }else{
                    Toast('获取数据失败!')
                }
            })
        },
        goDesc(id){
            // 点击使用编程式导航跳转到 图文介绍页面
            this.$router.push({ name:'goodsdesc' , params:{ id }})
        },
        goComment(id){
            // 点击使用编程式导航跳转到 商品详情页面
            this.$router.push({ name:'goodscomment' , params:{ id }})
        },
        beforeEnter(el){
            el.style.transform = 'translate(0,0)'
        },
        enter(el,done){
            el.offsetWidth

            const ballposition = this.$refs.ball.getBoundingClientRect()
            const badgeposition = document.getElementById('badge').getBoundingClientRect()
            const xDist = badgeposition.left - ballposition.left
            const yDist = badgeposition.top - ballposition.top

            el.style.transform = `translate(${xDist}px,${yDist}px)`
            el.style.transition = 'all 1s cubic-bezier(.33,-0.37,.96,.24)'
            done()
        },
        afterEnter(el){
            this.ballflag = !this.ballflag
        },
        getCountNum(count){
            this.selectcount = count
        },
        addToShopCar(){
            this.ballflag=!this.ballflag
            var goodsinfoObj ={
                id:this.id,
                count:this.selectcount,
                price:this.goodsinfodata.sell_price,
                selected:true
            }
            this.$store.commit('addToCar',goodsinfoObj)
        }
    },
    components:{
        swipe,
        numbox
    }
}
</script>

<style lang="scss" scoped>
    .goodsinfo-container{
        background-color:#e6e0e0;
        overflow: hidden;
        .price{
            span{
                color:red;
                font-weight: 600;
            }
        }
        .mui-card-footer{
            display: block;
            button{
                margin: 15px 0;
            }
        }
        .ball{
            width:15px;
            height:15px;
            border-radius: 50%;
            background-color:red;
            position: absolute;
            z-index: 99;
            top: 390px;
            left: 147px;
        }
    }
</style>